"use client";
import React from "react";
import { cn } from "@/components/lib/utils";
import { cursors } from "./cursor-data";

/**
 * fake cursor SVG, has same hotspot as the real curor (png) needs to adjest the offset and size.
 * - DO "-top-3.5 -left-3.5 size-8"
 * @returns
 */
export function FakePointerCursorSVG({
  fill,
  hue,
  className,
  ...props
}: React.HTMLAttributes<SVGSVGElement> & {
  fill: string;
  hue: string;
}) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 64 64"
      width="64"
      height="64"
      className={cn("pointer-events-none", className)}
      {...props}
    >
      <g filter="url(#a)">
        <path
          fill={fill}
          d="M26.366 30.143c-.992-2.38 1.396-4.77 3.777-3.777l18.436 7.681c2.54 1.058 2.303 4.73-.35 5.454l-5.265 1.436a2.889 2.889 0 0 0-2.027 2.027L39.5 48.228c-.724 2.654-4.396 2.89-5.454.351l-7.681-18.436Z"
        />
        <path
          stroke={hue}
          strokeWidth="1.55"
          d="M27.076 29.847c-.727-1.746 1.025-3.498 2.77-2.77l18.437 7.68c1.861.777 1.688 3.47-.257 4l-5.265 1.437a3.659 3.659 0 0 0-2.567 2.567l-1.437 5.265c-.53 1.945-3.223 2.118-4 .257l-7.68-18.436Z"
        />
      </g>
      <defs>
        <filter
          id="a"
          width="35.777"
          height="35.777"
          x="20.357"
          y="22.283"
          colorInterpolationFilters="sRGB"
          filterUnits="userSpaceOnUse"
        >
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feOffset dy="1.926" />
          <feGaussianBlur stdDeviation="2.889" />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0" />
          <feBlend
            in2="BackgroundImageFix"
            result="effect1_dropShadow_3436_1176"
          />
          <feBlend
            in="SourceGraphic"
            in2="effect1_dropShadow_3436_1176"
            result="shape"
          />
        </filter>
      </defs>
    </svg>
  );
}

/**
 * for local cursor only, as its not colored.
 * this is sized and positioned
 */
export function FakeLocalPointerCursorPNG({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div {...props} className={cn("relative z-[99999]", className)}>
      <img
        src={cursors.default_png.url}
        className={cn("pointer-events-none size-8")}
        style={{
          transform: "translate(-14px, -14px)",
        }}
      />
    </div>
  );
}
